import React, { useState, useEffect, useRef } from 'react'
import { Steps, Button, Form, Input, Select, message, notification } from 'antd'
import axios from 'axios';
import NewsEditor from '../../../components/news-manage/NewsEditor';

const { Step } = Steps;
const { Option } = Select;

export default function NewsAdd(props) {
    const [current, setCurrent] = useState(0)
    // 新闻分类列表
    const [newsCategorizeList, setNewsCategorizeList] = useState([])
    // 表单数据
    const NewsForm = useRef(null)
    // 富文本内容
    const [content, setContent] = useState("")
    // 表单内容
    const [formInfo, setFormInfo] = useState("")

    // 获取新闻分类列表
    useEffect(() => {
        axios.get(`/categories`).then((res) => {
            // console.log(res.data,'分类列表');
            setNewsCategorizeList(res.data)
        })
    }, [])
    // 点击上一步
    const backSteps = () => {
        setCurrent(current - 1)
    }
    // 点击下一步
    const nextSteps = () => {
        if (current === 0) {
            NewsForm.current.validateFields().then(res => {
                // console.log(res,'表单内容');
                setFormInfo(res)
                setCurrent(current + 1)
            }).catch(err => console.log(err))
        }
        else {
            // console.log(content, formInfo,'cf');
            if (content === "" || content.trim() === "<p></p>") {
                message.error("新闻内容不能为空")
            } else {
                setCurrent(current + 1)
            }
        }
    }
    // 获取用户信息
    const User = JSON.parse(localStorage.getItem("token"))

    // 点击保存草稿箱或提交审核
    const saveDraftsOrReview = (auditState) => {
        axios.post('/news', {
            ...formInfo,
            "content": content,
            "region": User.region?User.region:"全球",
            "author": User.username,
            "roleId": User.roleId,
            "auditState": auditState,
            "publishState": 0,
            "createTime": Date.now(),
            "star": 0,
            "view": 0,
        }).then(res => {
            props.history.push(auditState===0?'/news-manage/draft':'/audit-manage/list')
            notification.info({
                message: `通知`,
                description: `您可以到${auditState===0?'草稿箱':'审核列表'}中查看您的新闻`,
                placement:"bottomRight"
            })
        })
    }

    return (

        <div>
            <h1 style={{ marginBottom: '50px', textAlign: 'center' }}>撰写新闻</h1>
            <Steps current={current}>
                <Step title="基本信息" description="新闻标题，新闻分类" />
                <Step title="新闻内容" description="新闻主体内容" />
                <Step title="新闻提交" description="保存草稿或者提交审核" />
            </Steps>
            <div>
                {
                    <div style={{ margin: "50px 0" }}>
                        <div style={current === 0 ? {} : { display: "none" }}>
                            <Form
                                ref={NewsForm}
                                name="basic"
                                labelCol={{
                                    span: 2,
                                }}
                                wrapperCol={{
                                    span: 22,
                                }}
                            >
                                <Form.Item
                                    label="新闻标题"
                                    name="title"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your newstitle!',
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="新闻分类"
                                    name="categoryId"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your newscategorize!',
                                        },
                                    ]}
                                >
                                    <Select> 
                                    {
                                        newsCategorizeList.map(item=>
                                            <Option value={item.id} key={item.id}> {item.title}</Option>
                                            )
                                    }
                                    </Select>
                                </Form.Item>
                            </Form>
                        </div>
                        <div style={current === 1 ? {} : { display: "none" }}>
                            <NewsEditor getContent={(value) => {
                                // console.log(value);
                                setContent(value)
                            }}></NewsEditor>
                        </div>
                        <div style={current === 2 ? {} : { display: "none" }}>
                        </div>
                    </div>

                }
            </div>
            <div style={{ marginTop: '30px' }}>
                {
                    current > 0 && <Button type="primary" onClick={backSteps} style={{ marginRight: '20px' }}>上一步</Button>
                }
                {
                    current < 2 && <Button type="primary" onClick={nextSteps}>下一步</Button>
                }
                {
                    current === 2 &&
                    <span>
                        <Button type="primary" onClick={()=>saveDraftsOrReview(0)} style={{ marginRight: '20px' }}>保存草稿箱</Button>
                        <Button type="primary" onClick={()=>saveDraftsOrReview(1)} style={{ marginRight: '20px' }}>提交审核</Button>
                    </span>
                }
            </div>
        </div>
    )
}
